<template>
    <div v-if="state.isShow" style="overflow: hidden;">
        <a-modal 
            :style="{
                width:'850px',
                top:'30px',
            }" 
            :bodyStyle="{
                width:'100%',
                height:'650px',
                overflowY:'auto',
                overflowX:'hidden'
            }" 
            v-model:open="state.isShow" 
            @ok="handleOk" 
            :closable="false"
        >
            <div class="request-config">
                <request-global-config></request-global-config>
                <request-self-config :target-data-request="targetData.request"></request-self-config>
                <request-send-result></request-send-result>
            </div>
            <template #footer>
                <a-flex gap="middle" justify="space-between" align="center">
                    <div>
                        柱状图
                    </div>
                    <div>
                        <a-button @click="handleCancel">取消</a-button>
                        <a-button @click="sendHandle" type="dashed" :loading="state.loading">发送请求</a-button>
                        <a-button type="primary" @click="handleOk">保存</a-button>
                    </div>
                </a-flex>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import type { CreateComponentType } from '@/views/dataview/packages/public/type';
import { reactive } from 'vue';
import requestGlobalConfig from './components/requestGlobalConfig/index.vue'
import requestSelfConfig from './components/requestSelfConfig/index.vue'
import requestSendResult from './components/requestSendResult/index.vue'
import type { over } from 'lodash';

const props = withDefaults(defineProps<{
    targetData:CreateComponentType
}>(),{})

const emits = defineEmits<{
    (e:'sendData'):void
}>()

const state = reactive({
    isShow:false,
    loading:false
})

const handleOk = ()=>{
    handleCancel()
}

const handleCancel = ()=>{
    state.isShow = false
}

const handleOpen = ()=>{
    state.isShow = true
}

const sendHandle = async()=>{
    state.loading = true
    await emits('sendData')
    state.loading = false
}

defineExpose({
    handleOpen
})
</script>

<style lang='scss' scoped>

</style>